:root {
  --monofont: monospace;
  --dark: #1a1b1e;
  --dark-btn-border: #777;
  --dark-btn-border-hover: #fff;
}
.monofont {
  font-family: var(--monofont);
}
.linebreaks {
  white-space: pre-wrap;
}

.text-fields-node {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #000;
  border-radius: 5px;
  min-width: 200px;
}

hr {
  border: none;
  background-color: #bbb;
  height: 1px;
}

.grouped-handle {
  background: #555;
  height: 16px !important;
}

.react-flow__handle {
  background: #555;
  width: 8px;
  height: 8px;
}

.small-standard-font {
  font-size: 10pt;
  font-family: -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.status-icon {
  display: inline-block;
  font-size: 12pt;
  margin: 0px 0px 0px 4px;
  padding: 0px;
}
.status-icon .status-tooltip {
  visibility: hidden;
  font-size: 10pt;
  font-family: -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  width: 150px;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  pointer-events: none;

  /* Position the tooltip */
  position: absolute;
  z-index: 9000;
}
.status-icon:hover .status-tooltip {
  visibility: visible;
}
.warning-status {
  color: #cc7722;
}
.warning-status .status-tooltip {
  background-color: #cc7722;
}
.ready-status {
  color: #4cbb17;
}
.ready-status .status-tooltip {
  background-color: #4cbb17;
}
.error-status {
  color: #e52a2a;
}
.error-status .status-tooltip {
  background-color: #e52a2a;
}

/* Loading icon */
.lds-ring {
  display: inline-block;
  position: relative;
  margin-left: 4px;
  width: 16px;
  height: 16px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 2px;
  border: 2px solid #0096ff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #0096ff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.llm-list-container {
  background-color: #eee;
  border-radius: 4px;
  padding: 2px 8px;
  overflow-y: auto;
  max-height: 205px;
}
.llm-list-backdrop {
  margin: 6px 0px 6px 6px;
  padding-bottom: 4px;
  text-align: left;
  font-size: 10pt;
  color: #777;
}
.llm-scorer-container {
  width: 290px;
}

html[data-mantine-color-scheme="dark"] .llm-list-container {
  background-color: var(--dark);
  color: white;
  border: 1px solid #222;
  border-radius: 5px;
}
html[data-mantine-color-scheme="dark"] .llm-list-backdrop {
  color: #999;
}

.llm-list-item {
  background: white;
}
html[data-mantine-color-scheme="dark"] .llm-list-item {
  background: #222;
  color: #ccc;
}
html[data-mantine-color-scheme="dark"] .llm-list-item button {
  background: var(--dark);
  color: #999;
}
html[data-mantine-color-scheme="dark"] .llm-list-item button:hover {
  background: #ccc;
  color: #222;
}

/* Tooltip */
html[data-mantine-color-scheme="dark"] .mantine-Tooltip-tooltip {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}
html[data-mantine-color-scheme="dark"] .mantine-Tooltip-arrow {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}

button.remove-edge-btn {
  border-radius: 50%;
  border-color: #ddd;
  border-style: solid;
  background-color: #ddd;
  cursor: pointer;
}
button.remove-edge-btn:hover {
  background-color: white;
  border-color: #fff;
}
button.remove-edge-btn:active {
  background-color: #777;
  color: #fff;
  border-color: #777;
}

html[data-mantine-color-scheme="dark"] button.remove-edge-btn {
  background-color: #444;
  border-color: #444;
  border-width: 6px;
}
html[data-mantine-color-scheme="dark"] button.remove-edge-btn:hover {
  background-color: #555;
  border-color: #555;
}
html[data-mantine-color-scheme="dark"] button.remove-edge-btn:active {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

.input-field {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.input-field textarea {
  font-family: var(--monofont), monospace;
}

.remove-text-field-btn {
  margin-left: 3px;
  padding: 2px 4px;
  border-style: none;
  background-color: inherit;
  color: #bbb;
  font-weight: bold;
  cursor: pointer;
}
.remove-text-field-btn:hover {
  color: #666;
  background-color: #eee;
}
html[data-mantine-color-scheme="dark"] .remove-text-field-btn {
  color: #555;
}
html[data-mantine-color-scheme="dark"] .remove-text-field-btn:hover {
  color: #eee;
  background-color: #666;
}

.input-field input {
  margin-left: 5px;
}

.node-header {
  border-bottom: 1px;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-style: solid;
  border-bottom-color: #ddd;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.node-header:hover {
  border-bottom-color: #888;
}

html[data-mantine-color-scheme="dark"] .node-header {
  color: #ccc;
  border-bottom-color: #222;
}
html[data-mantine-color-scheme="dark"] .node-header:hover {
  border-bottom-color: #999;
}

.prompt-node {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
  width: 310px;
}

.prompt-node textarea {
  width: 100%;
  resize: none;
  box-sizing: border-box;
}

html[data-mantine-color-scheme="dark"] .prompt-variant-add-btn {
  color: #777;
}

.multi-eval-node {
  background-color: #eee !important;
}
html[data-mantine-color-scheme="dark"] .multi-eval-node {
  background-color: var(--dark) !important;
  color: #ddd;
}

.evaluator-node {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
  min-width: 280px;
}
.eval-output-footer {
  margin: 10px -9px -9px -9px;
  min-height: 100px;
  max-height: 100px;
  /* cursor: zoom-in; */
}
.eval-output-footer p {
  position: absolute;
  overflow: scroll;
  white-space: pre-wrap;
  font-family: "Monaco", Courier, monospace;
  font-size: 9pt;
  margin: 6px 8px 6px 8px;
  padding-top: 2px;
  padding-bottom: 0px;
  max-height: 90px;
  max-width: 100%;
}
.eval-inspect-response-footer {
  margin: 10px -9px -9px -9px;
  max-height: 100px;
  overflow-y: auto;
  background-color: #ceeaf5b1;
  /* #cef5dab1; */
  cursor: zoom-in;
}
.eval-inspect-response-footer button {
  cursor: zoom-in;
}

.eval-score {
  /* background-color: #eee; */
  /* padding: 8px; */
}

.eval-vote-icon {
  color: #999;
}

.eval-vote-icon:hover {
  color: #333;
}

.eval-vote-icons {
  display: none;
  position: relative;
  /* opacity: 0.3; */
  margin-left: 6px;
  margin-top: -6px;
}

.eval-vote-chosen {
  display: none; /* Disable eval the eval voting for initial EvalGen release */
  /* display: inline-flex; */
  position: relative;
  margin-left: 6px;
  margin-top: -6px;
}

.eval-score:hover .eval-vote-icons {
  display: none; /* Disable eval the eval voting for initial EvalGen release */
  /* display: inline-flex; */
  /* opacity: 1.0; */
}

html[data-mantine-color-scheme="dark"] .eval-inspect-response-footer {
  background-color: #333;
  color: #ccc;
}
html[data-mantine-color-scheme="dark"] .eval-inspect-response-footer button {
  color: #ccc;
}

/* .blink-inspect-response-footer {
    animation: blink-footer 0.7s ease-in 1;
  }
  @keyframes blink-footer {
    50% {
      background-color: #eff6fbb1; 
    }
  } */

.ace-editor-container {
  resize: vertical;
}

.vis-node {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
}
.plotly-vis {
  width: 100%;
  height: 100%;
  resize: both;
  overflow: auto;
}
.plot-legend {
  font-size: 11px;
  font-family: monospace;
}
.plot-legend-item {
  cursor: pointer;
}
.plot-legend-item:hover {
  opacity: 0.6;
}
.plot-legend-item:active {
  opacity: 0.8;
}

g.ytick text {
  line-height: 2px;
}

.response-var-inline > .response-var-name {
  font-size: 8pt;
  font-weight: normal;
}
.response-var-inline > .response-var-value {
  font-size: 8pt;
}

.grade-resp-var-container {
  margin-bottom: 6px;
  line-height: 1;
}
.grade-resp-var-container > .response-var-name {
  font-size: 10pt;
}
.grade-resp-var-container > .response-var-value {
  font-size: 10pt;
}

.settings-var-inline {
  background: #eee;
  margin: -3px 0px 0px 0px !important;
  padding: 4px 4px 8px 8px !important;
  border-radius: 0px 0px 12px 12px !important;
}
html[data-mantine-color-scheme="dark"] .settings-var-inline {
  background: #222;
  color: #ccc;
}
.wrap-line {
  white-space: pre-wrap;
}

.checkcard {
  display: flex;
  width: 100%;
  border: rem(1px) solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-8));
  border-radius: var(--mantine-radius-sm);
  padding: var(--mantine-spacing-lg);
  background-color: light-dark(
    var(--mantine-color-white),
    var(--mantine-color-dark-8)
  );
}
.checkcard:hover {
  background-color: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-9)
  );
}

.inspector-node {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
}
.inspect-response-container {
  overflow-y: scroll;
  min-width: 150px;
  width: 280px;
  min-height: 270px;
  height: 200px;
  max-width: 1150px;
  max-height: 750px;
  resize: both;
}
.inspect-modal-response-container .response-var-header {
  padding: 10px;
  line-height: 1.2;
}
.inspect-modal-response-container .response-var-name {
  font-size: 10pt;
  font-weight: bold;
}
.inspect-modal-response-container .response-var-value {
  font-size: 10pt;
  letter-spacing: -0.5px;
}
.inspect-modal-response-container .response-llm-header {
  font-size: 10pt;
}
.inspect-modal-response-container .small-response {
  font-size: 10pt;
  margin: 6px -1px 8px -1px;
  padding: 8px;
}
.inspect-modal-response-container .small-response-metrics {
  font-size: 12pt;
}
.inspect-modal-response-container .num-same-responses {
  font-size: 10pt;
}
.inspect-table-var {
  background-color: rgb(224, 244, 250);
  padding-top: 10px;
  border-right: 1px solid #cde;
  font-weight: 500;
  white-space: pre-wrap;
}
.inspect-table-metavar {
  background-color: rgb(224, 232, 250);
  padding-top: 10px;
  border-right: 1px solid #cde;
  font-weight: 500;
  white-space: pre-wrap;
}
.inspect-table-llm-resp {
  padding-top: 8px;
  padding-bottom: 20px;
  min-width: 160px;
  border-right: 1px solid #eee;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.inspect-responses-drawer {
  position: absolute;
  left: 100%;
  top: 12px;
  background-color: white;
  border: 1px solid #999;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 2px;
  box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.1) inset;
}
html[data-mantine-color-scheme="dark"] .inspect-responses-drawer {
  color: #ccc;
  background-color: var(--dark);
  border: 1px solid #444;
}

.response-group-component-header:hover {
  color: #05e;
  cursor: pointer;
  text-decoration: underline;
}
.response-group-component-header:active {
  color: #00c;
}
html[data-mantine-color-scheme="dark"] .response-group-component-header:hover {
  color: #fff;
}
html[data-mantine-color-scheme="dark"] .response-group-component-header:active {
  color: orange;
}

.response-var-header {
  background-color: #e0f4fa;
  border-radius: 1px;
  padding: 2px 8px 4px 8px;
  line-height: 0.9;
}
html [data-mantine-color-scheme="dark"] .response-var-header {
  background-color: #222;
  color: #ccc;
}
.response-var-inline-container {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  justify-content: left;
  /* font-style: italic; */
  padding-bottom: 1px;
  padding-top: 1px;
}
.response-llm-header {
  font-family: -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 9pt;
  font-weight: 500;
  padding: 4px 4px 4px 7px;
  border-top-left-radius: 5px;
  border-top-right-radius: 15px;
}
html[data-mantine-color-scheme="dark"] .response-llm-header {
  color: #fff;
}
.response-var-inline {
  margin: 0px 4px;
  /* background-color: #ffffff33; */
  color: #00000088;
  border-radius: 4px;
  text-rendering: optimizeSpeed;
  /* mix-blend-mode: color-burn; */
  line-height: 0.9;
  padding: 0px 4px;
}
.response-var-name {
  font-size: 9pt;
  font-weight: bold;
}
.response-var-value {
  font-family: monospace;
  font-size: 8pt;
}
.inspect-modal-prompt-box {
  background-color: #eee;
  padding: 10px;
  margin: 0px 0px 10px 0px;
  border-bottom-style: solid;
  border-bottom-color: #aaa;
  box-shadow: 1px 1px 8px #ccc;
  max-height: 200px;
  overflow-y: auto;
}
.inspect-modal-prompt-text {
  font-family: monospace;
  font-size: 11pt;
  white-space: pre-line;
}
.inspect-modal-prompt-prefix {
  font-size: 10pt;
  font-weight: bold;
}

.prompt-preview {
  font-size: 10pt;
  font-family: var(--monofont), monospace;
  border-radius: 6px;
  padding: 8px;
  margin: 10px 0px 0px 0px;
  background-color: #ddd;
  color: #444;
  white-space: pre-wrap;
}
.prompt-preview-template {
  background-color: #ddf1f8;
}
.prompt-preview-popover {
  pointer-events: none;
  max-height: 500px;
  max-width: 400px;
  overflow-y: auto;
  background-color: #fff;
}

html[data-mantine-color-scheme="dark"] .prompt-preview {
  background-color: #222;
  color: #eee;
}
html[data-mantine-color-scheme="dark"] .prompt-preview-template {
  background-color: #333;
}
html[data-mantine-color-scheme="dark"] .prompt-preview-popover {
  background-color: #444;
  color: #eee;
}

.join-text-preview {
  margin: 0px 0px 10px 0px;
}

.small-response {
  font-size: 8pt;
  font-family: var(--monofont), monospace;
  border-top-style: dashed;
  border-top-width: 0.0625rem;
  border-bottom-style: dashed;
  border-bottom-width: 0.0625rem;
  border-color: #fff;
  padding: 2px;
  margin: 4px 3px;
  background-color: rgba(255, 255, 255, 0.4);
  white-space: pre-wrap;
  user-select: text;
  cursor: text;
}
html[data-mantine-color-scheme="dark"] .small-response {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
  padding: 6px;
}

.small-response-metrics {
  font-size: 9pt;
  font-family: -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  text-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 0px 2px 2px 0px;
  margin: 8px 20% -6px 20%;
  /* background-color: rgba(255, 255, 255, 0.3); */
  color: #333;
  white-space: pre-wrap;
}
html[data-mantine-color-scheme="dark"] .small-response-metrics {
  color: #fff;
}

.num-same-responses {
  position: relative;
  display: block;
  float: right;
  text-align: center;
  top: 2pt;
  right: 3px;
  /* width: 12pt; */
  padding: 1px 4px;
  height: 12pt;
  background-color: #00000033;
  border-radius: 5px;
  font-size: 9pt;
  font-weight: 500;
  color: white;
  overflow: hidden;
}

.llm-group-header {
  font-weight: 400;
  font-size: 10pt;
  margin: 6px 8px 4px 8px;
  padding-top: 2px;
  padding-bottom: 0px;
  color: #222;
}

.response-group {
  margin: 2px 0px 8px 0px;
  padding: 2px 2px 2px 2px;
  /* border-radius: 7px; */
}
.response-boxes-wrapper {
  margin-top: 4px;
  padding-left: 10px;
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: #bbb;
}
.response-box {
  padding: 2px 0px 1px 0px;
  margin: 0px 2px 4px 2px;
  border-radius: 5px;
  min-width: 120px;
  /* max-width: 30%; */
}

.response-item-llm-name-wrapper {
  padding-bottom: 0px;
}
.response-item-llm-name-wrapper h1 {
  font-size: 8pt;
  font-weight: bold;
  font-style: italic;
  /* mix-blend-mode: color-burn; */
  color: #000000bb;
  opacity: 0.7;
  text-align: right;
  padding-right: 8px;
  margin: 0px;
}

.response-preview-container {
  margin: 10px -9px -9px -9px;
  max-height: 100px;
  overflow-y: auto;
  background-color: #ceeaf5b1;
  cursor: zoom-in;
}

.response-tag {
  font-size: 9pt;
  color: #555;
  margin: 0px 0px 0px 2px;
}

.cfnode {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
  /* box-shadow: 1px 1px 8px #ccc; Slows it down */
}
.cfnode:hover {
  border-color: #222;
  /* box-shadow: 0px 0px 6px #999; */
}

html[data-mantine-color-scheme="dark"] .cfnode {
  background-color: var(--dark);
  color: #ccc;
  border: 1px solid #555;
  border-radius: 5px;
}
html[data-mantine-color-scheme="dark"] .cfnode:hover {
  border-color: #eee;
}

html[data-mantine-color-scheme="dark"] textarea {
  background-color: var(--dark);
  color: #eee;
  border: 1px solid #999;
}

.comment-node {
  background-color: #eee !important;
}
html[data-mantine-color-scheme="dark"] .comment-node {
  background-color: #222 !important;
}
html[data-mantine-color-scheme="dark"] .comment-node textarea {
  background-color: #222 !important;
  border: none;
}

.join-node {
  min-width: 200px;
}

.tabular-data-node {
  min-width: 280px;
}
.tabular-data-container {
  resize: both;
  overflow: auto;
  /* max-width: 800px; */
  width: 400px;
  min-width: inherit;
  height: 300px;
  /* max-height: 700px; */
  border-bottom-style: solid;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-color: #ccc;
  display: block;
}
.tabular-data-container td {
  white-space: nowrap;
}
.tabular-data-container th {
  white-space: nowrap;
}
.editable-table {
  table-layout: auto;
}
.table-col-edit-btn {
  position: relative;
  top: 1px;
  margin: 0px;
  padding: 2px;
  color: #888;
  width: "12px";
  height: "12px";
  cursor: pointer;
}
.table-col-edit-btn:hover {
  background-color: #eee;
}
.table-col-edit-btn:active {
  background-color: #ddd;
}
.content-editable-div {
  white-space: pre-wrap;
  overflow-y: scroll;
  max-height: 150px;
  margin: 6px 0px;
  font-family: var(--monofont), monospace;
  font-size: 10pt;
  line-height: 1;
  cursor: text;
}
th .content-editable-div {
  font-family: -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
[contenteditable="true"]:empty:not(:focus):before {
  content: attr(placeholder);
  color: grey;
  font-style: italic;
}
.add-table-row-btn {
  position: absolute;
  font-size: 10pt;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.add-table-row-btn button {
  margin-right: 10px;
}
html[data-mantine-color-scheme="dark"] .add-table-row-btn button {
  padding: 4px;
  background-color: var(--dark);
  border-color: #444;
  border-style: solid;
}
html[data-mantine-color-scheme="dark"] .add-table-row-btn button:hover {
  background-color: #555;
  border-color: #bbb;
}
html[data-mantine-color-scheme="dark"] .add-table-row-btn button:active {
  background-color: #000;
  border-color: #eee;
}
/* .add-column-btn {
    position: relative;
    float: right;
    margin-top: 6px;
    height: 80px; 
    width: 20px;
  }
  .add-column-btn span {
    position: absolute;
    top: 60%;
    transform-origin: top left;
    transform: translate(-50%) rotate(-90deg);
  } */

.var-select-toolbar {
  text-align: right;
  margin: 0px;
  padding: 0px;
  position: relative;
  margin-bottom: -30px;
}
.var-select-toolbar label {
  font-size: 12px;
}
.var-select-toolbar select {
  width: 100px;
  font-size: 12px;
}

.code-style {
  background-color: #ddd;
  font-family: "Courier New", Courier, monospace;
}

.hook-tag {
  padding-top: 5px;
  padding-bottom: 3px;
}

.code-mirror-field-header {
  font-size: 10pt;
  color: #333;
  margin-bottom: 4px;
}
html[data-mantine-color-scheme="dark"] .code-mirror-field-header {
  color: #666;
}

/* Allows resizing the Mantine Textarea component */
.text-field-fixed .mantine-Textarea-wrapper textarea {
  resize: vertical;
  overflow-y: auto;
  width: 260px;
  padding: calc(0.5rem / 3);
  font-size: 10pt;
  font-family: var(--monofont), monospace;
  line-height: 1.2;
  border-color: #999;
}
.prompt-field-fixed .mantine-Textarea-wrapper textarea {
  resize: vertical;
  overflow-y: auto;
  padding: calc(0.5rem / 3);
  font-size: 10pt;
  font-family: var(--monofont), monospace;
  line-height: 1.2;
  border-color: #999;
}

html[data-mantine-color-scheme="dark"]
  .prompt-field-fixed
  .mantine-Textarea-wrapper
  textarea {
  background-color: var(--dark);
  border-color: #444;
}

html[data-mantine-color-scheme="dark"]
  .text-field-fixed
  .mantine-Textarea-wrapper
  textarea {
  background-color: var(--dark);
  border-color: #444;
}

.add-text-field-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-mantine-color-scheme="dark"] .add-text-field-btn button {
  background-color: var(--dark);
  border-color: #444;
  border-style: solid;
}
html[data-mantine-color-scheme="dark"] .add-text-field-btn button:hover {
  background-color: #555;
  border-color: #bbb;
}
html[data-mantine-color-scheme="dark"] .add-text-field-btn button:active {
  background-color: #000;
  border-color: #eee;
}

.add-llm-model-btn {
  display: flex;
  align-items: right;
  justify-content: right;
  float: right;
  height: 20px;
}
.add-llm-model-btn button {
  border-style: solid;
  border-color: #777;
  border-width: 1pt;
  border-radius: 3px;
  color: #777;
  margin-right: 2px;
}
.add-llm-model-btn:hover button {
  background-color: white;
}
.add-llm-model-btn:active button {
  background-color: black;
  color: white;
}

html[data-mantine-color-scheme="dark"] .add-llm-model-btn button {
  background-color: var(--dark);
  border-color: var(--dark-btn-border);
  color: #ccc;
}
html[data-mantine-color-scheme="dark"] .add-llm-model-btn:hover button {
  background-color: #333;
  border-color: var(--dark-btn-border-hover);
}
html[data-mantine-color-scheme="dark"] .add-llm-model-btn:active button {
  background-color: #000;
}

/* Play button triangle |> */
.play-button {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 10px;
  margin: 2px;
  pointer-events: none;
  border-color: transparent transparent transparent #202020;
  border-style: solid;
  border-width: 5px 0 5px 10px;
}

/** CSS Button style from https://css-buttons-hover.netlify.app/ */
.AmitSahoo45-button-3 {
  position: relative;
  padding: 2px 10px;
  height: 20px;
  margin-top: -5px;
  margin-right: 3px;
  border-radius: 5px;
  border: 1px solid #999;
  font-size: 12px;
  background: rgb(63, 204, 106, 0.2);
  color: #333;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  cursor: pointer;
}
.AmitSahoo45-button-3:hover {
  background: rgb(26, 200, 69);
  color: white;
  box-shadow: 0 0 30px 5px rgb(63, 234, 106, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.AmitSahoo45-button-3:active {
  background: #40a829;
  color: yellow;
}

html[data-mantine-color-scheme="dark"] .AmitSahoo45-button-3 {
  background: var(--dark);
  color: rgb(26, 200, 69);
  border-color: var(--dark-btn-border);
}
html[data-mantine-color-scheme="dark"] .AmitSahoo45-button-3:hover {
  background: rgb(26, 200, 69);
  color: #fff;
  border-color: var(--dark-btn-border-hover);
  box-shadow: 0 0 30px 5px rgb(63, 234, 106, 0.815);
}
html[data-mantine-color-scheme="dark"] .AmitSahoo45-button-3:active {
  background: #040;
  color: #0f0;
}

.AmitSahoo45-button-3:hover::before {
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

.AmitSahoo45-button-3::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.script-node-input {
  width: 100%;
}

.node-header-btns-container {
  float: right;
  margin-right: 0px;
  margin-left: 10px;
  margin-top: -3px;
}

/* Close button */
.close-button {
  position: relative;
  padding: 2px 6px;
  margin-top: -7px;
  border-radius: 5px;
  border: 1px solid #999;
  font-size: 12px;
  background: transparent;
  color: #333;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  cursor: pointer;
  height: 20px;
}
.close-button:hover {
  background: rgb(200, 26, 69);
  color: white;
  box-shadow: 0 0 30px 5px rgb(234, 63, 106, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.close-button:active {
  background: #660000;
  color: yellow;
}
.close-button:hover::before {
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}
.close-button::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  color: black;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

html[data-mantine-color-scheme="dark"] .close-button {
  background: var(--dark);
  color: #ddd;
  border-color: var(--dark-btn-border);
}
html[data-mantine-color-scheme="dark"] .close-button:hover {
  background: rgb(200, 26, 69);
  color: #fff;
  border-color: var(--dark-btn-border-hover);
  box-shadow: 0 0 30px 5px rgb(234, 63, 106, 0.815);
}
html[data-mantine-color-scheme="dark"] .close-button:active {
  background: #660000;
  color: red;
}

/* Custom button styling */
.custom-button {
  position: relative;
  text-decoration: none;
  padding: 2px 6px;
  margin-top: -7px;
  margin-right: 3px;
  border-radius: 5px;
  border: 1px solid #999;
  font-size: 12px;
  background: transparent;
  color: #333;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  cursor: pointer;
}
.custom-button:hover {
  background: rgb(241, 208, 44);
  color: white;
  box-shadow: 0 0 30px 5px rgba(255, 222, 35, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.custom-button:active {
  background: #a36a07;
  color: rgb(51, 10, 6);
}
.custom-button:hover::before {
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}
.custom-button::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  color: black;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

html[data-mantine-color-scheme="dark"] .custom-button {
  background: var(--dark);
  color: #ddd;
  border-color: var(--dark-btn-border);
}
html[data-mantine-color-scheme="dark"] .custom-button:hover {
  background: rgb(241, 208, 44);
  color: #222;
  border-color: var(--dark-btn-border-hover);
  box-shadow: 0 0 30px 5px rgba(255, 222, 35, 0.815);
}

/* AI button */
.ai-button {
  position: relative;
  padding: 2px 6px;
  margin-top: -7px;
  margin-right: 3px;
  border-radius: 5px;
  border: 1px solid #999;
  font-size: 12px;
  color: #666;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  cursor: pointer;
  background: #f2d2f3;
}
.ai-button:hover {
  background: rgb(177, 63, 204);
  color: white;
  box-shadow: 0 0 30px 5px rgb(177, 63, 204);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.ai-button:active {
  background: rgb(129, 40, 151);
}
.ai-button:hover::before {
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}
.ai-button::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  color: black;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

html[data-mantine-color-scheme="dark"] .ai-button {
  background: var(--dark);
  color: hotpink;
  border-color: var(--dark-btn-border);
}
html[data-mantine-color-scheme="dark"] .ai-button:hover {
  background: rgb(210, 57, 244);
  color: #fff;
  border-color: var(--dark-btn-border-hover);
  box-shadow: 0 0 30px 5px rgb(210, 57, 244);
}
html[data-mantine-color-scheme="dark"] .ai-button:active {
  background: #660066;
  color: hotpink;
}

/* Make text blink */
.text-blink {
  animation: blinker 0.75s linear infinite;
  font-family: sans-serif;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* Chat history bubbles */
.chat-bubble {
  --r: 15px; /* the radius */
  --t: 10px; /* the size of the tail */

  max-width: 80%;
  padding: calc(2 * var(--r) / 3);
  mask:
    radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d)
      100% / calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2)
      calc(var(--r) / -2) padding-box,
    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space
      padding-box;
  background: #333 border-box;
  color: #fff;
}
html[data-mantine-color-scheme="dark"] .chat-bubble {
  background: #eee border-box;
  color: #222;
}
html[data-mantine-color-scheme="dark"] .chat-bubble textarea {
  background: transparent !important;
  border: none;
  color: #000;
}
.chat-msg-left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
}
.chat-msg-right {
  --_d: 100%;
  border-right: var(--t) solid #0000;
  margin-left: var(--t);
  place-self: end;
}
.chat-msg-right textarea {
  max-width: 88%;
}
.chat-history {
  margin: 0;
  min-height: 10vh;
  display: grid;
  place-content: left;
  width: 100%;
  gap: 10px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

.something-changed-circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0px solid;
  background-color: #ff0000;
  opacity: 0.7;
  margin-bottom: 10px;
  margin-left: 2px;
}

.favorite-icon:hover {
  color: red;
}

/* Model settings form styling */
.rjsf fieldset {
  border-style: none;
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
}
.rjsf fieldset .field-array {
  margin: 0;
  padding: 0;
}
.rjsf label.control-label {
  font-weight: bold;
  font-size: 11pt;
}
.rjsf .field-array legend {
  font-weight: bold;
  font-size: 11pt;
}

.rjsf input {
  width: 100%;
  resize: none;
}
.rjsf select {
  width: 100%;
}
.rjsf textarea {
  width: 100%;
  resize: vertical;
}

.rjsf .field-description {
  color: #444;
  margin-top: 8px;
}

.rjsf fieldset .form-group {
  margin-bottom: 30px;
  padding-top: 6px;
  font-size: 9pt;
  border-top-style: solid;
  border-top-color: #ddd;
}

.rjsf button.btn {
  float: right;
  margin-right: 30px;
}
.rjsf button.btn-add {
  width: 20px;
  height: 20px;
  background: #40a829;
}
.rjsf button.btn-danger {
  background: #660000;
}

.rjsf .help-block {
  color: #999;
  margin: 0;
}

.gradeContainer {
  position: relative;
  overflow: visible;
  /* width: 20px; */
}

.gradeUpCount {
  position: absolute;
  right: 0px;
  top: -3px;
  font-size: x-small;
}

.gradeDownCount {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: x-small;
}

.criteriaButtons {
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  /* gap: 100px;
  padding: 10px;
  column-gap: normal;
  -moz-column-gap: 100px; */
}
html[data-mantine-color-scheme="dark"] .react-flow__controls-button {
  background-color: #777 !important;
  color: #ddd;
}
html[data-mantine-color-scheme="dark"] .react-flow__controls-button:hover {
  background-color: #999 !important;
  color: #fff;
}
html[data-mantine-color-scheme="dark"] .react-flow__attribution {
  background-color: #222 !important;
  color: #fff;
}

.script-node {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #000;
  border-radius: 5px;
}

.script-node-input {
  min-width: 300px;
}

.csv-element {
  position: relative;
  color: #8a3e07;
  background-color: #ffe8cc;
  font-size: inherit;
  font-family: monospace;
  padding: 0.2em 0.4em;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}
html[data-mantine-color-scheme="dark"] .csv-element {
  background-color: #333;
  color: #fff;
}

/* set a muted text */
.csv-comma {
  color: #ffc107;
}
html[data-mantine-color-scheme="dark"] .csv-comma {
  color: #7f7f7f;
}

.csv-div {
  width: 290px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 10pt;
  font-family: monospace;
}

.csv-input {
  width: 290px;
  height: 150px;
  font-size: 10pt;
  font-family: monospace;
}

.prompt-list-modal .mantine-Modal-header {
  background-color: #ffd700;
}

html[data-mantine-color-scheme="dark"]
  .prompt-list-modal
  .mantine-Modal-header {
  background-color: #333;
  color: #fff;
}

html[data-mantine-color-scheme="dark"]
  .prompt-list-modal
  .mantine-Modal-content {
  background-color: #444;
}

.saved-flows-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background: white;
  padding: 10px;
  border-top: 1px solid #ddd;
  color: grey;
}

html[data-mantine-color-scheme="dark"] .saved-flows-footer {
  background: #222;
  border-top: 1px solid #444;
  color: white;
}

.icl {
  white-space: pre-wrap;
  word-break: break-all;
}

.upload-node {
  width: 290px;
}

.upload-node-droparea {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin: 10px;
  background-color: #f9f9f9;
  cursor: pointer;
}
html[data-mantine-color-scheme="dark"] .upload-node-droparea {
  background-color: #333;
  border-color: #444;
}

.upload-node-list {
  max-height: 200px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  background: #fafafa;
}
html[data-mantine-color-scheme="dark"] .upload-node-list {
  background: #222;
  border-color: #444;
}

.chunk-node {
  width: 290px;
}

/* Classes relative to the Media Node */
.media-node {
  width: 340px;
  max-width: 340px;
}

.media-node .node-header {
  margin-bottom: 0px;
}

.media-textfields-container {
  min-width: 100%;
  width: 100%;
  overflow-y: auto;
  border: none;
  display: block;
}

.media-textfields-container
  .text-field-fixed
  .mantine-Textarea-wrapper
  textarea {
  width: 100%;
}

.media-image-preview-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.num-images-overlay {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  pointer-events: none; /* Makes the overlay click-through */
}

.empty-state-box-media-node {
  height: 160px;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 6px auto;
  cursor: pointer;
}

html[data-mantine-color-scheme="dark"] .empty-state-box-media-node {
  background-color: #333;
  border-color: #444;
}

.carousel-nav-button {
  font-size: 28px;
  color: #666;
  cursor: pointer;
  width: 38px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  transition: all 0.2s;
}

.carousel-nav-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.carousel-nav-button:active {
  transform: scale(0.95);
}

/* Dark Mode Overrides */
html[data-mantine-color-scheme="dark"] .carousel-nav-button {
  color: #bbb; /* Lighter color for dark mode */
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Light background for dark mode */
}

html[data-mantine-color-scheme="dark"] .carousel-nav-button:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Brighter hover background for dark mode */
}
